{extend name="web/public/base" /}
{block name="header"}
<link rel="stylesheet" href="__WAP__/webuploader/webuploader.css"/>
<style>
    .webuploader-pick {
        margin-left: 0 !important;
        top: 0 !important;
    }

    .webuploader-pick-hover {
        background: rgba(255, 255, 255, 0) !important;
    }
</style>
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="__WAP__/webuploader/webuploader.html5only.js"></script>
<script type="text/javascript" src="__WAP__/webuploader/webuploader.html5only.min.js"></script>
{/block}
{block name="main"}
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li><a><i class="fa fa-home"></i> 首页</a></li>
        <li class="active">购物商城</li>
        <li class="active">{$title}</li>
    </ul>
    <div class="row">
        <div class="col-sm-12">
            <section class="panel panel-default">
                <header class="panel-heading font-bold">{$title}</header>
                <div class="panel-body">
                    <form action="{:url('')}" method="post" id="ajaxform" onsubmit="return false;">
                        <div class="row col-md-10">
                            <div class="row col-lg-12">
                                <div class="form-group col-sm-6">
                                    <label>商品名称</label>
                                    <input type="text" id="goods_name" name="goods_name" class="form-control"
                                           placeholder="商品名称">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>商品图标</label>
                                    <div id="picker1">
                                        <img src="__WAP__/images/add.png" style="max-width:300px;height:200px;"/>
                                        <input type="hidden" name="goods_ico" id="goods_ico" value=""/>
                                    </div>

                                    <script type="text/javascript">
                                        var uploader1 = WebUploader.create({
                                            // 文件接收服务端。
                                            server: "{:url('File/uploadPicture')}",
                                            // 选择文件的按钮。可选。
                                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                                            pick: '#picker1',
                                            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                                            resize: false,
                                            accept: {
                                                extensions: 'gif,jpg,jpeg,png',
                                                mimeTypes: 'img/*'
                                            }
                                        });

                                        // 当有文件被添加进队列的时候
                                        uploader1.on('fileQueued', function (file) {
                                            // layer.msg('图片' + file.id + ":" + file.name + "已被选中");
                                            uploader1.upload();
                                        });
                                        // 文件上传过程中创建进度条实时显示。
                                        uploader1.on('uploadProgress', function (file, percentage) {
                                            var $li = $('#' + file.id),
                                                $percent = $li.find('.progress .progress-bar');

                                            // 避免重复创建
                                            if (!$percent.length) {
                                                $percent = $('<div class="progress progress-striped active">' +
                                                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                                                    '</div>' +
                                                    '</div>').appendTo($li).find('.progress-bar');
                                            }

                                            $li.find('p.state').text('上传中');

                                            $percent.css('width', percentage * 100 + '%');
                                        });


                                        uploader1.on('uploadSuccess', function (file, res) {
                                            if(res.status != 200){
                                                layer.msg(res.msg);
                                                return false;
                                            }
                                            info = res.data;
                                            var src = info.path;
                                            $("#picker1 img").attr("src", src);
                                            var id = info.id;
                                            $('#goods_ico').val(id)
                                        });

                                        uploader1.on('uploadError', function (file) {
                                            alert("上传失败");
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="row col-lg-12">
                                <div class="form-group col-sm-6">
                                    <label>商品分类</label>
                                    <select class="form-control" name="category_id">
                                        {foreach name='shopCates' item='vo'}
                                        <option value="{$vo.id}" {$vo._disabled}>{$vo.title}</option>
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>单件运费</label>
                                    <input type="text" name="transfee" class="form-control" placeholder="单件运费">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>商品成本</label>
                                    <input type="text" name="original_price" class="form-control" placeholder="商品成本">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>商品售价</label>
                                    <input type="text" name="member_price" class="form-control" placeholder="商品售价">
                                </div>

                                <div class="form-group col-sm-6">
                                    <label>积分价（报单积分/复消积分）</label>
                                    <input type="text" name="stock" class="form-control" placeholder="积分价">
                                </div>

                                <div class="form-group col-sm-6">
                                    <label>现金价</label>
                                    <input type="text" name="money" class="form-control" placeholder="现金价">
                                </div>

                            </div>

                            <div class="row col-lg-12">
                                <div class="form-group col-sm-6">
                                    <label>商品销售量</label>
                                    <input type="text" name="sell_num" class="form-control" placeholder="商品销售量">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>商品余量</label>
                                    <input type="text" name="goods_num" class="form-control" placeholder="商品余量">
                                </div>

                                <!--<div class="form-group col-sm-6">-->
                                    <!--<label>所属店铺</label>-->
                                    <!--<select class="form-control" name="sid">-->
                                        <!--{foreach name='stores' item='vo'}-->
                                        <!--<option value="{$vo.id}">{$vo.store_name}</option>-->
                                        <!--{/foreach}-->
                                    <!--</select>-->
                                <!--</div>-->

                            </div>
                            <div class="row col-lg-12">
                                <div class="form-group  col-sm-12">
                                    <label>商品图集</label>

                                    <div id="picker2" style="display: flex;flex-flow: wrap;">
                                        <img src="__WAP__/images/add.png" style="max-width:200px;height:150px;margin-right:10px;margin-bottom:10px;"/>
                                        <input type="hidden" name="pics" id="pics" value=""/>
                                    </div>

                                    <script type="text/javascript">
                                        var uploader2 = WebUploader.create({
                                            // 文件接收服务端。
                                            server: "{:url('File/uploadPicture')}",
                                            // 选择文件的按钮。可选。
                                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                                            pick: '#picker2',
                                            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                                            resize: false,
                                            accept: {
                                                extensions: 'gif,jpg,jpeg,png',
                                                mimeTypes: 'img/*'
                                            }
                                        });

                                        // 当有文件被添加进队列的时候
                                        uploader2.on('fileQueued', function (file) {
                                            // layer.msg('图片' + file.id + ":" + file.name + "已被选中");
                                            uploader2.upload();
                                        });
                                        // 文件上传过程中创建进度条实时显示。
                                        uploader2.on('uploadProgress', function (file, percentage) {
                                            var $li = $('#' + file.id),
                                                $percent = $li.find('.progress .progress-bar');

                                            // 避免重复创建
                                            if (!$percent.length) {
                                                $percent = $('<div class="progress progress-striped active">' +
                                                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                                                    '</div>' +
                                                    '</div>').appendTo($li).find('.progress-bar');
                                            }

                                            $li.find('p.state').text('上传中');

                                            $percent.css('width', percentage * 100 + '%');
                                        });


                                        uploader2.on('uploadSuccess', function (file, res) {
//                                            console.log(info);
                                            if(res.status != 200){
                                                layer.msg(res.msg);
                                                return false;
                                            }
                                            info = res.data;
                                            var src = info.path;
                                            var id = info.id;
                                            var img = '<img style="width:200px;height:150px;margin-right:10px;" src="' + src + '"/>';
                                            $('#picker2').append(img);
                                            var pics = $('#pics').val();
                                            if (pics) {
                                                var pics = pics + ',' + id;
                                            } else {
                                                var pics = id;
                                            }
                                            $('#pics').val(pics);
                                        });

                                        uploader2.on('uploadError', function (file) {
                                            alert("上传失败");
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="row col-lg-12">
                                <div class="form-group  col-sm-12">
                                    <label>商品详情</label>
                                    <textarea name="goods_detail" id="container"></textarea>
                                    <script type="text/javascript">
                                        var ue = UE.getEditor('container', {
                                            initialFrameWidth: 1270,
                                            initialFrameHeight: 400
                                        });
                                    </script>
                                </div>
                            </div>
                            <div class="row col-lg-12">
                                <div class="form-group col-sm-6">
                                    <label>商品简介</label>
                                    <textarea type="text" name="goods_introduct" class="form-control"
                                              placeholder="商品简介"></textarea>
                                </div>

                            </div>
                            <div class="row col-lg-12">
                                <!--<div class="form-group col-sm-6">-->
                                    <!--<label>是否农场产品：</label>-->
                                    <!--<label class="am-checkbox-inline">-->
                                        <!--<input type="radio" name="is_farm" value="0">否</label>-->
                                    <!--<label class="am-checkbox-inline">-->
                                        <!--<input type="radio" name='is_farm' value="1" checked>是-->
                                    <!--</label>-->
                                <!--</div>-->
                                <!--<div class="form-group col-sm-6">-->
                                    <!--<label>是否严选产品：</label>-->
                                    <!--<label class="am-checkbox-inline">-->
                                        <!--<input type="radio" name="is_selecte" value="0">否</label>-->
                                    <!--<label class="am-checkbox-inline">-->
                                        <!--<input type="radio" name='is_selecte' value="1" checked>是-->
                                    <!--</label>-->
                                <!--</div>-->
                                <!--<div class="form-group col-sm-6">-->
                                    <!--<label>是否好物：</label>-->
                                    <!--<label class="am-checkbox-inline">-->
                                        <!--<input type="radio" name="is_good" value="0">否</label>-->
                                    <!--<label class="am-checkbox-inline">-->
                                        <!--<input type="radio" name='is_good' value="1" checked>是-->
                                    <!--</label>-->
                                <!--</div>-->
                                <div class="form-group col-sm-6">
                                    <label>是否推荐：</label>
                                    <label class="am-checkbox-inline">
                                        <input type="radio" name="is_recom" value="0">否</label>
                                    <label class="am-checkbox-inline">
                                        <input type="radio" name='is_recom' value="1" checked>是
                                    </label>
                                </div>
                            </div>
                            <footer class="panel-footer text-right bg-light lter col-sm-12">
                                <button type="submit" class="btn btn-success btn-s-xs">提 交</button>
                            </footer>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function () {
        $.validator.setDefaults({
            submitHandler: function () {
                ajaxSubmit();
            },
            highlight: function (element, errorClass) {
                $(element).css('border', '2px solid red');
            },
            unhighlight: function (element, errorClass) {
                $(element).css('border', '1px solid green');
            }
        });

        $('#ajaxform').validate({
            rules: {
                goods_name: "required"
            },
            messages: {
                goods_name: "请输入商品名称"
            }
        });
    })
</script>
{/block}
